<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:object="${book}">
<head>
    <title>编辑图书</title>
    <style>
        body {
            font-family: "Helvetica Neue", sans-serif;
            margin: 30px;
            background-color: #f9f9f9;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        form {
            max-width: 500px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        label {
            display: block;
            margin: 12px 0 6px;
            font-weight: 600;
        }

        input, textarea, select {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        textarea {
            height: 100px;
            resize: vertical;
        }

        button {
            margin-top: 20px;
            width: 100%;
            padding: 10px;
            background-color: #2c3e50;
            border: none;
            color: white;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #1a2733;
        }
    </style>
    <script>
        function submitForm() {
            const formData = {
                id: [[${book.id}]],
                title: document.getElementById('title').value.trim(),
                author: document.getElementById('author').value.trim(),
                publisher: document.getElementById('publisher').value.trim(),
                isbn: document.getElementById('isbn').value.trim(),
                status: document.getElementById('status').value
            };

            fetch('/book/admin/edit', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                },
                body: JSON.stringify(formData)
            }).then(res => res.json())
                .then(data => {
                    if (data.code === 0) {
                        alert("修改成功");
                        window.location.href = '/book/admin/books';
                    } else {
                        alert("修改失败：" + data.message);
                    }
                });
            return false;
        }
    </script>
</head>
<body>
<h1>编辑图书</h1>
<form th:object="${book}" onsubmit="return submitForm()">
    <input type="hidden" id="id" name="id" th:value="*{id}">
    <label for="title">书名</label>
    <input type="text" id="title" name="title" th:value="*{title}" required>

    <label for="author">作者</label>
    <input type="text" id="author" name="author" th:value="*{author}" required>

    <label for="publisher">出版社</label>
    <input type="text" id="publisher" name="publisher" th:value="*{publisher}">

    <label for="isbn">ISBN</label>
    <input type="text" id="isbn" name="isbn" th:value="*{isbn}" required>

    <label for="status">状态</label>
    <select id="status" name="status" required>
        <option th:value="'AVAILABLE'" th:selected="${book.status == 'AVAILABLE'}">可借</option>
        <option th:value="'BORROWED'" th:selected="${book.status == 'BORROWED'}">已借</option>
    </select>

    <button type="submit">保存</button>
</form>
</body>
</html>